<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格线自定义内容位置</title>
		<style type="text/css">
		.grid-container{
			display: grid;
			padding: 10px;
			grid-template-columns: [apple] 1fr [banana] 2fr [cat] 3fr [dog];
			grid-template-rows: [one] 100px [two] 200px [three];
			background-color: #7FFFD4;
		}
		.one{
			grid-column:banana / dog ;
			grid-row: one / two;
			
		}
		.two{
			grid-area: two / apple / three / dog ;
		}
		.three{
			grid-column-start: apple;
			grid-column-end: banana;
			grid-row-start: one;
			grid-row-end: two;
		}
		.grid-container > div{
			padding: 10px;
			border: white 2px solid;
			background-color: pink;
		}
		</style>
	</head>
	<body>
		<div class="grid-container">
			<div class="one">1</div>
			<div class="two">2</div>
			<div class="three">3</div>
		</div>
	</body>
</html>
